<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>消息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			html,body {
				background-color: #efeff4;
			}
			 .oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron" id="roster-cnt">
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
					</li>
				</ul>
			</div>
		</div>  	
			<script id="roster-tpl" type="text/html">
			{{each msg as value index}}
				<li class="mui-table-view-cell" data-chatname="{{value.name}}">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell">
								<img src="http://placehold.it/60x60" />
							</div>
							<div class="oa-contact-content mui-table-cell">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name">{{value.from}}</h4>
									<span class="oa-contact-position mui-h6">{{value.date}}</span>
								</div>
								<p class="oa-contact-email mui-h6">
									{{value.data}}
								</p>
							</div>
						</div>
					</div>
				</li>
			{{/each}}
		</script>
		<script src='../sdk/webim.config.js'></script>	
		<script src="../sdk/strophe-1.2.8.min.js"></script> 
		<script src="../sdk/websdk-1.4.8.min.js"></script>
		<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init()
			var token; 
			console.log("离线消息页面初始化");
			mui.plusReady(function() {  
				//获取app Token
				loadPage=function(){	
					 var m={
					 	'grant_type': 'client_credentials',
						'client_id': 'YXA6w4DR8MccEea0MzVtR_xP8g',
						'client_secret': 'YXA6lN2CbQxw-cKKzNnD2xLqIJ5t_0Q'
					 }
					console.log("离线消息页面初始化2");
					mui.ajax('http://a1.easemob.com/1186161221178717/hnhml20161221/token',{
								dataType:'json',
								type:'post', 
								timeout:10000,
								headers: {'Content-Type':'application/json'},
								data:JSON.stringify(m),					   
								success:function(data){									
									console.log(data.access_token);
									token=data.access_token;
									console.log(data.expires_in) 
									
									//获取用户在线状态
									mui.ajax('http://a1.easemob.com/1186161221178717/hnhml20161221/user/xiaoyu/status',{
												dataType:'json',
												type:'get', 
												timeout:10000,
												headers: {'Content-Type':'application/json','Authorization':'Bearer '+token},								   
												success:function(data){									
													console.log("用户状态:"+data.data.xiaoyu); 
																	
												},
												error:function(xhr,type,errorThrown){						
													console.log(errorThrown); 
													console.log(type);   
													console.log(xhr.statusText);
												}, 
												 
												
									})  
								},
								error:function(xhr,type,errorThrown){
									console.log(errorThrown); 
									 console.log(type);  
									 console.log(xhr.statusText);
								}, 
								
								
					}) 	
					console.log("离线消息页面初始化3");					
				}
//				loadPage();
				//从storage里取得离线数据
				mui.plusReady(function(){
					console.log("离线消息页面初始化3");
					var ws=plus.webview.currentWebview();
//					ws.addEventListener( "show", function(e){
						var msg = plus.storage.getItem("msg");
						console.log(msg); 
						var data = {
							msg: JSON.parse(msg) 
						}
						var html = template('roster-tpl', data);
//						console.log(html)
						document.getElementById('roster-cnt').innerHTML ='我草';
						document.getElementById('roster-cnt').innerHTML = html;
//					}, false );
					// 预加载chatPage
					chatPage = mui.preload({
						url:'single-chat.html',
					    id:'singleChat',
					}); 
				})
//				var conn = new WebIM.connection({
//				    https: WebIM.config.https,
//				    url: WebIM.config.xmppURL,
//				    isAutoLogin: WebIM.config.isAutoLogin,
//				    isMultiLoginSessions: WebIM.config.isMultiLoginSessions
//				}); 
//					// 初始化连接
//				conn.listen({
//					onOpened : function(){
//						console.log("成功登录啊啊啊啊");
//						conn.setPresence();
//						conn.getRoster({
//					       	success : function(roster) {
//					       		//打印好友列表
////					      		console.log(JSON.stringify(roster));
//					      		plus.storage.setItem("roster",JSON.stringify(roster));
//							}
//						}); 
//					},
//					// 收到联系人订阅请求的回调方法
//					onPresence : function(message) {
//						handlePresence(message);
//					},
//					// 接收离线消息
//					onTextMessage: function ( message ) {
//						var from = message.from;//消息的发送者
//						var msg = message.data;//文本消息体	
//						// 收到文本消息在页面展示
//						console.log("aaa");
//						msgList.push(message);
//						plus.storage.setItem("msg",JSON.stringify(msgList));
//					},
//					// 当连接关闭时的回调方法
//					onClosed : function() {
//						 
//						conn.clear(); 
//						conn.onClosed();
//					},
////													
//					onError : function(message){
//						for(var key in message.data)
//						{
//							console.log("Key是:" + key);
//							console.log("对应的值是:" + message.data[key]);
//						}
//						
//					}			
//				});
			}) 
		</script>
	</body>
</html>